<template>
  <view class="pending-container">
    <!-- 列表内容：仅显示已审核（待入库）单据 -->
    <view class="list-section">
      <view class="list-content">
        <!-- 加载动画 -->
        <view v-if="approvedLoading && approvedList.length === 0" class="loading-state">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <view v-else-if="approvedList.length === 0" class="empty-state">
          <uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
          <text class="empty-text">暂无待入库的入库单</text>
        </view>
        
        <view v-else class="list-items">
          <view 
            class="list-item" 
            v-for="item in approvedList" 
            :key="item.recptId"
            @click="goToDetail(item)"
          >
            <view class="item-header">
              <text class="item-title">{{ item.recptCode }}</text>
              <view class="item-status status-approved">
                <text class="status-text">已审批</text>
              </view>
            </view>
            
            <view class="item-content">
              <view class="content-row">
                <text class="row-label">入库类型</text>
                <text class="row-value">{{ getMiscTypeText(item.miscType) }}</text>
              </view>
              <view class="content-row">
                <text class="row-label">入库日期</text>
                <text class="row-value">{{ item.recptDate || '-' }}</text>
              </view>
              <view class="content-row" v-if="item.remark">
                <text class="row-label">备注</text>
                <text class="row-value">{{ item.remark }}</text>
              </view>
            </view>
            
            <view class="item-action">
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view v-if="approvedHasMore && approvedList.length > 0" class="load-more" @click="loadMoreApproved">
          <text class="load-text">{{ approvedLoading ? '加载中...' : '加载更多' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMiscRecptListByStatus } from '@/api/wm/miscrecpt.js'

export default {
  name: 'MiscPendingList',
  data() {
    return {
      // 仅保留已审核（待入库）数据
      approvedList: [],
      approvedPageNum: 1,
      approvedPageSize: 10,
      approvedHasMore: true,
      approvedLoading: false
    }
  },
  
  onLoad() {
    this.loadApprovedList()
  },
  
  onShow() {
    this.refreshApprovedList()
  },
  
  methods: {
    // 加载待入库列表（已审核）
    loadApprovedList() {
      if (this.approvedLoading) return
      
      this.approvedLoading = true
      
      getMiscRecptListByStatus(this.approvedPageNum, this.approvedPageSize, 'APPROVED').then(response => {
        const data = response.data || response
        
        if (this.approvedPageNum === 1) {
          this.approvedList = data.rows || []
        } else {
          this.approvedList = [...this.approvedList, ...(data.rows || [])]
        }
        
        const currentTotal = this.approvedList.length
        this.approvedHasMore = currentTotal < (data.total || 0)
      }).catch(error => {
        console.log('加载待入库列表失败:', error)
        if (error !== '500') {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        this.approvedLoading = false
      })
    },
    
    // 刷新待入库列表
    refreshApprovedList() {
      this.approvedPageNum = 1
      this.approvedHasMore = true
      this.loadApprovedList()
    },
    
    // 加载更多待入库
    loadMoreApproved() {
      if (this.approvedLoading || !this.approvedHasMore) return
      
      this.approvedPageNum++
      this.loadApprovedList()
    },
    
    // 跳转到详情页
    goToDetail(item) {
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      prevPage.$vm.setSelectedRecpt(item.recptId)
      uni.navigateBack()
    },
    
    // 获取入库类型文本
    getMiscTypeText(miscType) {
      const map = {
        '01': '其他入库',
        '02': '采购样品入库',
        '03': '客供入库',
        '04': '退料入库',
        '05': '盘盈入库',
        '06': '调拨入库',
        '07': '生产退料入库'
      }
      return map[miscType] || miscType || '未知类型'
    }
  }
}
</script>

<style lang="scss" scoped>
.pending-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.list-section {
  .list-content {
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 40rpx;
      background: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .loading-spinner {
        width: 60rpx;
        height: 60rpx;
        border: 4rpx solid #f3f3f3;
        border-top: 4rpx solid #007AFF;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20rpx;
      }
      
      .loading-text {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 40rpx;
      background: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .empty-text {
        font-size: 28rpx;
        color: #999;
        margin-top: 20rpx;
      }
    }
    
    .list-items {
      .list-item {
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        padding: 24rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        position: relative;
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
        }
        
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          
          .item-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          
          .item-status {
            padding: 6rpx 12rpx;
            border-radius: 16rpx;
            font-size: 20rpx;
            
            &.status-approving {
              background: #fff3cd;
              color: #856404;
            }
            
            &.status-approved {
              background: #d1ecf1;
              color: #0c5460;
            }
            
            .status-text {
              font-size: 20rpx;
            }
          }
        }
        
        .item-content {
          padding-right: 60rpx; // 为跳转图标预留空间
          
          .content-row {
            display: flex;
            justify-content: space-between;
            padding: 8rpx 0;
            border-bottom: 1rpx solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
            }
            
            .row-label {
              font-size: 26rpx;
              color: #666;
              min-width: 140rpx;
            }
            
            .row-value {
              font-size: 26rpx;
              color: #333;
              flex: 1;
              text-align: right;
              word-break: break-all;
            }
          }
        }
        
        .item-action {
          position: absolute;
          right: 24rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    
    .load-more {
      text-align: center;
      padding: 30rpx;
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .load-text {
        font-size: 28rpx;
        color: #007AFF;
      }
    }
  }
}

// 加载动画关键帧
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
